﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>表单输入绑定 - vue.js</title>
		
		<script src="../vue-2.6.11/dist/vue.js">
<script type="text/javascript">
<!--
	
//-->
</script>		

    </head>
    <body class="docs"> 
表单输入绑定 — Vue.js<br />
https://cn.vuejs.org/v2/guide/forms.html
<div id="app">

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" @change="handleChange">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames" @change="handleChange">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" @change="handleChange">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
	
</div>
	
    </body>
	
<script type="text/javascript">
<!--
	
var app = new Vue({
    el: '#app',
    data: {
        checkedNames: []
    },
    methods: {
        handleChange() {
			console.log("触发change事件");
			var that=this;
			console.log(that);
			console.log(that.checkedNames);
			if(that.checkedNames){
				that.ckeckInfo='复选框被选中了';
				that.ckeckClass='red';
			}else{
				that.ckeckInfo='复选框没有被选中';
				that.ckeckClass='';
			}
		}
    }
})
</script>
	
</html>
